<template>
  <header class="header">
    <div class="container">
      <div class="navbar">
        <!-- Logo -->
        <div class="logo">
          <i class="fas fa-laptop-code"></i>
          <span>CodeLearn</span>
        </div>

        <!-- 导航 -->
        <ul class="nav-links">
          <li><router-link to="/" exact-active-class="active">首页</router-link></li>
          <li><router-link to="/editor" exact-active-class="active">发帖</router-link></li>
          <li><router-link to="/agent" exact-active-class="active">Ai智能写作</router-link></li>
        </ul>

        <!-- 搜索框 -->
        <div class="search-bar">
          <input
            type="text"
            placeholder="搜索文章、用户或标签..."
            v-model="keyword"
            @keyup.enter="search"
          />
          <button @click="search"><i class="fas fa-search"></i></button>
        </div>

        <!-- 右侧：登录/注册 或 个人中心 -->
        <div class="user-actions">
          <!-- 已登录：显示欢迎语 + 个人中心 + 登出按钮 -->
            <div v-if="userStore.isLogin" class="logged-in">
              <span class="welcome-text">
                欢迎回来，
                <!-- 如果是 admin，则昵称可点击跳转到 /admin -->
                <router-link
                  v-if="userStore.userInfo.role === 'admin'"
                  to="/admin"
                  class="nickname-link"
                >
                  {{ userStore.userInfo.nickname }}
                </router-link>

                <!-- 否则只是普通文字 -->
                <span v-else>{{ userStore.userInfo.nickname }}</span>
              </span>

              <router-link to="/user" class="profile-btn">
                <i class="fas fa-user-circle"></i> 个人中心
              </router-link>

              <button @click="handleLogout" class="logout-btn">
                退出登录
              </button>
          </div>

          <!-- 未登录：显示登录/注册 -->
          <div v-else>
            <router-link to="/auth/login">登录</router-link>
            <router-link to="/auth/register" class="login-btn">注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref,  onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus' // 用于登出成功提示
import { useUserStore } from '../stores/user'

const userStore = useUserStore()
const keyword = ref('')
const router = useRouter()


// 2. 搜索功能（不变）
const search = () => {
  if (keyword.value.trim()) {
    router.push({ name: 'search', query: { q: keyword.value } })
  }
}

// 3. 登出功能：清除 token + 跳转登录页
const handleLogout = () => {
  userStore.logout()
  ElMessage.success('已成功退出登录')
  router.push('/') // 跳转到登录页
}

// 4. 监听 token 变化：确保其他页面登录/登出后，导航栏实时更新
onMounted(() => {
  // 监听 localStorage 中 token 的变化（需通过自定义事件实现，因为 localStorage 本身无监听）
  window.addEventListener('storage', (e) => {
    if (e.key === 'token') {
      userStore.isLogin = !!e.newValue // 新值存在则为已登录，否则未登录
    }
  })
})


</script>

<style scoped>
/* 原有样式不变，新增/修改以下样式 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #fc5531;
}
.logo i {
  margin-right: 10px;
}
.nav-links {
  display: flex;
  list-style: none;
}
.nav-links li {
  margin-left: 25px;
}
.nav-links a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: color 0.3s;
}
.nav-links a.active {
  color: #fc5531;
}
.search-bar {
  display: flex;
  align-items: center;
  background: #f5f6f7;
  border-radius: 20px;
  padding: 8px 15px;
  width: 300px;
}
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 5px;
}
.search-bar button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #777;
}
.user-actions {
  display: flex;
  align-items: center;
  gap: 15px; /* 增加按钮间距，更美观 */
}
.user-actions a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: color 0.3s;
}
/* 登录按钮样式（不变） */
.user-actions .login-btn {
  background: #fc5531;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  transition: background 0.3s;
}
.user-actions .login-btn:hover {
  background: #e04a28; /*  hover 效果，提升交互 */
}
/* 个人中心按钮样式 */
.user-actions .profile-btn {
  display: flex;
  align-items: center;
  color: #fc5531; /* 与活跃态颜色一致 */
  gap: 5px;
}
/* 登出按钮样式 */
.user-actions .logout-btn {
  background: transparent;
  border: 1px solid #fc5531;
  color: #fc5531;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}
.user-actions .logout-btn:hover {
  background: #fc5531;
  color: white;
}
.logged-in {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-text {
  font-weight: 500;
  color: #333;
}
.nickname-link {
  color: #fc5531;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.nickname-link:hover {
  color: #e04a28;
}

</style>
